<template>
  <div>
    <!-- 用户导入对话框 -->
    <el-dialog
      class="dia-style"
      title="导入"
      :visible.sync="upload.open"
      width="600px"
      :close-on-click-modal="false"
      @close="cancel">
      <el-upload
        ref="upload"
        accept=".xlsx"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-change="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        :limit="1"
        drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div><span>支持扩展名：.xlsx</span></div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="importExcelErrorLog" v-if="code == 201" style="color: #1c84c6"
          >查看错误信息（下载文件）</el-button
        >
        <el-button type="primary" @click="submitFileForm">保 存</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import axios from 'axios'
import HkTable from '../../../../components/Hk-Table/index.vue'
import { importData } from '@/api/assets/removableMedia.js'
export default {
  data() {
    return {
      code: 200,
      errorUrl: '',
      fileList: [],

      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: true,
        // 设置上传的请求头部
        headers: { HKTOKEN: getToken() },
        // 上传的地址
        url: window.baseUrl.asset + '/assetsSecDomin/import',
      },
    }
  },
  methods: {
    // 文件上传中处理
    handleFileUploadProgress(file, fileList) {
      this.fileList = fileList.map((item) => {
        return { file: item.raw }
      })
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          '</div>',
        '导入结果',
        { dangerouslyUseHTMLString: true }
      )
    },

    // 提交上传文件
    submitFileForm() {
      let form = new FormData()
      this.fileList.forEach((item, key) => {
        form.append('file', item.file)
      })

      axios({
        method: 'post',
        url: this.upload.url,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        transformRequest: [
          function () {
            return form
          },
        ],
        params: form,
      })
        .then((res) => {
          this.code = res.data.code
          if (res.data.code == 200) {
            this.$message.success('导入成功')
            this.upload.open = false
            this.fileList = []
            this.$emit('submit')
            this.$refs.upload.clearFiles()
          } else if (res.data.code == 201) {
            this.errorUrl =window.baseUrl.asset + res.data.data.fileUrl
            this.$message.warning(res.data.msg + '\n' + res.data.data.msg)
            this.$refs.upload.clearFiles()
          } else {
            this.$message.warning('文件错误')
          }
        })
        .catch(() => {
          this.$message.warning('文件上传失败')
          this.$refs.upload.clearFiles()
        })
    },
    //   取消
    cancel() {
      this.upload.open = false
      this.fileList = []
      this.$refs.upload.clearFiles()
      this.code = 200
    },
    importExcelErrorLog() {
      this.gDownload(this.errorUrl, {}, 'ImportExcelErrorLog.txt')
    },
  },
  components: { HkTable },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-upload-dragger {
    width: 550px;
  }
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    div {
      .targetTable {
        margin-top: -20px;
        margin-bottom: -20px;
      }
    }
  }
}
</style>
